<template>
	<div style="position: absolute;z-index: 100;margin: 0;padding: 0;" :style="style" @click.stop="onLineClickHandler">
		<i class="el-icon-circle-plus"></i>
		<span style="font-size: 12px;">{{lineModel.label}}</span>
		<el-drawer title="" :visible.sync="drawerVisible" :append-to-body="true">
			<el-form ref="form" label-width="100px">
				<el-form-item label="显示">
					<el-input v-model="lineModel.label" size="small"></el-input>
				</el-form-item>
				<el-form-item label="条件">
					<el-input v-model="lineModel.condition" size="small" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<div style="border-bottom: 1px solid #E6E6E6;margin-top:5px;">
				<span style="font-size:18px;color:#7C7BAD;">插入节点</span>
			</div>
			<el-row style="margin-top: 10px;">
				<el-button size="mini" @click="onInsertNodeClickHandler('human')">人工节点</el-button>
				<el-button size="mini" @click="onInsertNodeClickHandler('auto')">自动节点</el-button>
			</el-row>
		</el-drawer>
	</div>
</template>

<script>
	export default {
		name: "LineLabel",
		props: ["lineModel"],
		beforeMount() {
			//var fromNode;
			var toNode;
			var nodeList=this.$store.state.workflowDesigner.nodeList;
			for(var i=0;i<nodeList.length;i++){
				if(nodeList[i].id==this.lineModel.fromNodeModelId){
					//fromNode=nodeList[i];
				}else if(nodeList[i].id==this.lineModel.toNodeModelId){
					toNode=nodeList[i];
				}
			}
			this.style={
				left:parseInt(toNode.left)+parseInt(toNode.width)/2-8+'px',
				top:parseInt(toNode.top)-30+'px',
			}
		},data() {
			return {
				style:{},
				drawerVisible:false,
			}
		},methods: {
			onLineClickHandler() {
				this.drawerVisible=true;
			},onInsertNodeClickHandler(type){
				this.$store.state.workflowDesigner.insertNode(this.lineModel,type);
			}
		},
	}
</script>

<style>
</style>
